<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-col :span="24">
          <div class="outpatient">
            <el-tabs v-model="activeName"  :tab-position="tabPosition" @tab-click="handleClick">
              <el-tab-pane label="患者列表" name="0">
                  <div class="outpatient">
                    <div style="padding:0 20px;">
                      <el-input  maxlength="18" type="text" placeholder="请输入身份证号" v-model="keyValue" class="input-with-select">
                      <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
                        <el-button slot="append" icon="el-icon-search">查找</el-button>
                      </el-input>
                    </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="患者详情" name="1">
                <div class="outpatient">
                      <ViewTitle text="基本信息"/>
                      <el-col :span="24">
                        <div class="outpatient-message">
                          <el-col :span='9'>
                            <div class="message-img"><img src="static/img/logo.d78cbfc6.png" alt=""></div>
                          </el-col>
                          <el-col :span='14' :offset="1">
                            <div class="message-text">
                              <div class="text-list">
                                <el-col :span='4'>姓名:</el-col>
                                <el-col :span='20'>患者</el-col>
                              </div>
                              <div class="text-list">
                                <el-col :span='4'>性别</el-col>
                                <el-col :span='20'>男</el-col>
                              </div>
                              <div class="text-list">
                                <el-col :span='4'>年龄</el-col>
                                <el-col :span='20'>30</el-col>
                              </div>
                              <div class="text-list">
                                <el-col :span='8'>出生日期:</el-col>
                                <el-col :span='16'>1998.11.8</el-col>
                              </div>
                              <div class="text-list">
                                <el-col :span='4'>民族:</el-col>
                                <el-col :span='20'>汉</el-col>
                              </div>
                            </div>
                          </el-col>
                        </div>
                      </el-col>
                      <el-col :span="24" style="marginTop:20px;marginBottom:20px;">
                        <el-col :span="4">身份证号:</el-col>
                        <el-col :span="20">522631199811080019</el-col>
                      </el-col>
                      <ViewTitle text="就诊信息"/>
                      <el-col :span="23" style="marginTop:20px;">
                        <el-timeline :reverse="reverse" >
                        <el-timeline-item
                          color="#02bf6b"
                          v-for="(activity, index) in activities"
                          :key="index"
                          >
                        <div>
                            <p>{{activity.timestamp}}</p>
                          <el-card>
                            <h4>缴纳挂号费</h4>
                            <p>状态: <span style="color:#02bf6b">已缴清</span>  </p>
                          </el-card>
                        </div>
                        </el-timeline-item>
                      </el-timeline>
                      </el-col>
                  </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-col>
      <el-col :span="18">
        <div class="" style="height:100vh;">
          
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ViewTitle from "../../../forComponents/viewTitle/index.vue"
import TableColumn from "../../../forComponents/tableColumn/index.vue"
export default {
   name:"outpatient",
   data(){
     return {
        reverse: false,
        tabPosition:"bottom",//tabs标签位置
        activeName:1, //0 患者列表 1 患者详情
        activities: [
          {
          content: '缴纳挂号费',
          timestamp: '状态:已经缴清',
          }
        ],
        keyValue:"",//左边页面input的value值
        type:1,
        ruleForm: {
          name: '', //姓名
          sex:"", //性别
          patientsType:"",//患者类型
          id:"", // 门诊号
          age:"", //年龄
          idNumber:"", // 身份证号
          mcNumber:"", // 医疗卡号
          administrativeOffice:"",//科室
          doctor:"", //大夫
          registration:"" //挂号类型
        },
        rules: {
          name: [
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          id:[
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          age:[
            { min: 0, max: 3, message: '年龄只能在0-200之间', trigger: 'blur' }
          ],
          idNumber:[
            {
              min:18,max:18,message:"请输入正确的身份证号",trigger: 'blur'
            }
          ]
        },
        tableData: [
          {
            number: '1',
            id: '10000',
            name: '郎亮',
            sex:"男",
            date:"1998.11.55",
            age: '18',
            patientsType:"普通门诊",
            idNumber:"555555555555555",
            mcNumber:"151561551156",
            doctor:"吴神医",
            disease:"癌症",
            registrationMoney:"100",
            registrationTime:"2020.11.01"
          }
        ],
        LeftTable:[
          {
            number:"001",
            name:"大大大",
            id:"52222222"
          },
            {
            number:"002",
            name:"大大大",
            id:"52222222"
          },
            {
            number:"003",
            name:"大大大",
            id:"52222222"
          }
        ],
        tableTitle:[
          {
            name:"序号",
            prop:"number"
          },
          {
            name:"门诊号",
            prop:"id"
          },
          {
            name:"姓名",
            prop:"name"
          },
          {
            name:"性别",
            prop:"sex"
          },
          {
            name:"出生日期",
            prop:"date"
          },
          {
            name:"年龄",
            prop:"age"
          },
          {
            name:"患者类型",
            prop:"patientsType"
          },
          {
            name:"身份证号",
            prop:"idNumber"
          },
          {
            name:"医疗卡号",
            prop:"mcNumber"
          },
          {
            name:"大夫",
            prop:"doctor"
          },
          {
            name:"病种",
            prop:"disease",
          },
          {
            name:"挂号金额",
            prop:"registrationMoney",
          },
          {
            name:"挂号时间",
            prop:"registrationTime",
          },
        ]
     }
   },
   methods:{
    number(){
      this.ruleForm.age=this.ruleForm.age.replace(/[^\.\d]/g,'');
      this.ruleForm.age=this.ruleForm.age.replace('.','');
    },
    numberId(){
      this.keyValue=this.keyValue.replace(/[^\.\d]/g,'');
      this.keyValue=this.keyValue.replace('.','');
    },
    handleClick(e,q){
     console.log(e,q) 
    }
   },
   components:{
     ViewTitle,
     TableColumn
   }
}
</script>

<style lang="scss" scoped> 
  @import "./index.scss";
  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	-webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
</style>